<template>
  <div>
    <!-- 头部轮播 -->
    <div class="box">
      <div class="ss">
        <van-search v-model="value" placeholder="请输入搜索关键词" show-action>
          <template #label>
            <span @click.native="$router.push('/city')">{{ cityName }}</span>
            <van-icon name="arrow-down" />
          </template>
          <template #action>
            <van-icon name="location-o" size="25" />
          </template>
        </van-search>
      </div>
      <div class="lb">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="item in images" :key="item.id">
            <van-image :src="'http://liufusong.top:8080' + item.imgSrc" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 中间内容 -->
    <div class="main">
      <van-grid>
        <van-grid-item icon="wap-home-o" text="整租" />
        <van-grid-item icon="friends-o" text="合租" />
        <van-grid-item icon="location-o" text="地图找房" />
        <van-grid-item icon="home-o" text="去出租" />
      </van-grid>
    </div>
    <div class="group">
      <div class="group_title">
        <h4>租房小组</h4>
        <span>更多</span>
      </div>
      <van-grid :column-num="2" :gutter="14">
        <van-grid-item
          :text="item.title + ' ' + item.desc"
          v-for="item in groupsList"
          :key="item.id"
        >
          <template #icon>
            <van-image :src="'http://liufusong.top:8080' + item.imgSrc" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="content">
      <ul>
        <li>
          <p>家住回龙观<br />归属的感觉</p>
        </li>
        <li>
          <p>移居四五环<br />大都市生活</p>
        </li>
        <li>
          <p>喧嚣三里屯<br />繁华的背后</p>
        </li>
        <li>
          <p>比邻十号线<br />地铁心连心</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  async created() {
    this.images = await this.$http({ url: '/home/swiper' })
    this.groupsList = await this.$http({
      url: '/home/groups?area=AREA%7C88cff55c-aaa4-e2e0'
    })
  },
  data() {
    return {
      value: '',
      images: [],
      groupsList: []
    }
  },
  methods: {},
  computed: {
    cityName() {
      const obj = JSON.parse(localStorage.getItem('city'))
      if (obj) {
        return obj.label
      } else {
        return '深圳'
      }
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 200px;
  position: relative;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  margin-top: 0;
  background: rgba(18, 37, 18, 0.1);
}
.box .lb {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100px;
  left: 0px;
  top: 0px;
}
.main {
  color: #27b97c;
}
.box .ss {
  position: absolute;
  z-index: 3px;
  width: 100%;
  height: 60px;
  left: 2px;
  top: 10px;
}
.content {
  width: 100%;
  height: 260px;
  background-color: #f6f5f6;
}
.content ul li {
  float: left;
  width: 45%;
  height: 80px;
  background-color: #fff;
  margin: 0px 8px 8px 8px;
  border-radius: 10px;
  font-size: 15px;
  padding: 8px 30px 10px 60px;
  font-weight: 600;
}

.group {
  background-color: #f6f5f6;
  overflow: hidden;
  padding: 0 10px 10px;
  .group_title {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
  }
}

.van-search {
  position: fixed;
  width: 100%;
  top: 25px;
  background-color: transparent;
}
</style>
